<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>semantic ui .</title>
        <link rel="stylesheet" href="css/semantic.min.css">
        <script src="js/jquery-3.2.1.min.js"></script>
        <script src="js/semantic.min.js"></script>
  
    </head>
<body>
    <div class="ui sidebar inverted vertical menu">
        <a class="item">
           option 1
        </a>
        <a class="item">
          option  2
        </a>
        <a class="item">
          option  3
        </a>
    </div>

    <div class="pusher">
        <div class="ui menu">
            <div class="header item" id = "menu">Home </div>
            <a class="item">About </a>
            <a class="item">Work </a>
            <a class="item">Locations </a>
        </div>
        <div class="ui segments">
            <div class="ui segment">
                <p>Top</p>
            </div>
            <div class="ui red segment">
                <p>中间</p>
            </div>
            <div class="ui blue segment">
                <p>中间</p>
            </div>
            <div class="ui green segment">
                <p>中间</p>
            </div>
            <div class="ui yellow segment">
                <p>Bottom</p>
            </div>
        </div>
    </div>
    <script>
    $('#menu').click(function () 
    {
        $('.ui.sidebar').sidebar('toggle')
        
    });
    </script>
</body>
</html>